<script setup>
import { RouterView, RouterLink } from "vue-router";


import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const addGoods = () => {
  router.push("/add");
}

const logout = () => {
  localStorage.removeItem("isLogin");
  router.push("/login");
}

</script>

<template>
  <div class="box">
    <header> <span>商品列表</span>  <button @click="logout">退出</button> </header>
  <div class="container">
    <nav>
        <router-link to="/"> <button>商品管理</button> </router-link>
        <router-link to="/add" @click="addGoods"> <button>添加商品</button> </router-link>
    </nav>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
  </div>

</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box{
  width: 600px;

  margin: 20px auto;
}

header {
  text-align: center;
  width: 600px;
  height: 60px;
  background-color: #99bcdd;
  /* display: flex; */
}
header button {
  /* display: flex; */
  margin-left: auto;
  height: 20px;
  text-align: center;
  margin-top: 20px;
}

.container {
  display: flex;
  height:100%;
  width:600px;
  /* padding-bottom: 20px */

}
.container nav {
  width: 100px;
  height: 1;
  background-color: #ffdede;
}

.container nav button {
  margin-top: 10px;
}
.container .content {
  width: 500px;
  height: 100%;
  background-color: #a0dddd;
}
table {
  width:500px;
  height: 100%;
  border-collapse: collapse;
  border: 1px solid #743434;
}
th, td {
  border: 1px solid #743434;
  padding: 5px;

}
</style>